<template>
  <div class="table-box" v-if="dataLoaded">
    <ProTable
      ref="proTable"
      title="实验列表"
      rowKey="logId"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      v-if="btnsPurview && btnsPurview.query.isShow"
    >
      <template #expand="scope">
        {{ scope.row }}
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="deviceDevLabMeterList">
import { ref, reactive, onMounted } from "vue";
import { DeviceOps, ResultData } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";

import ProTable from "@/components/ProTable/index.vue";

import { getDevLabMeterList } from "@/api/modules/deviceOpsManage/deviceDevLab";
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { getCabinetSelList } from "@/api/modules/deviceManage/cabinet";
const route = useRoute();
const userStore = useUserStore();
const btnsPurview = userStore.handlePurviewData[route.name as keyof typeof userStore.handlePurviewData];

const deviceSelList: any = ref([]);
const dataLoaded: any = ref(false);
const columns: any = ref([]);

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.dataList,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getDevLabMeterList(newParams);
};

onMounted(async () => {
  const { result } = (await getCabinetSelList({ pageNum: 1, pageSize: 100000000 })) as ResultData;
  deviceSelList.value = result.dataList;
  dataLoaded.value = true;
  // 表格配置项
  columns.value = [
    { type: "index", label: "序号", width: 80 },
    {
      prop: "deviceId",
      label: "设备名称",
      isShow: false,
      enum: async () => {
        return {
          data: deviceSelList.value.map((item: any) => {
            return {
              label: item.deviceName,
              value: item.deviceId
            };
          })
        };
      },
      isFilterEnum: false,
      search: {
        el: "select"
        // defaultValue: deviceSelList.value.length ? deviceSelList.value[0].deviceId : ""
      },
      width: 180
    },
    {
      prop: "startCreateTime",
      label: "操作开始时间",
      isShow: false,
      search: {
        el: "date-picker"
      },
      width: 180
    },
    {
      prop: "endCreateTime",
      label: "操作结束时间",
      isShow: false,
      search: {
        el: "date-picker"
      },
      width: 180
    },
    {
      prop: "deviceName",
      label: "装置名称",
      minWidth: 240
    },
    {
      prop: "deviceNo",
      label: "装置编号",
      minWidth: 120
    },
    {
      prop: "objectName",
      label: "仪器名称",
      minWidth: 180
    },
    {
      prop: "dataName",
      label: "实验项",
      minWidth: 180
    },
    {
      prop: "reqContent",
      label: "输入参数",
      minWidth: 180
    },
    {
      prop: "outContent",
      label: "输出参数",
      minWidth: 180
    },
    {
      prop: "resultFlg",
      label: "实验结果",
      minWidth: 120,
      render: scope => {
        return (
          <div>
            <span>{scope.row.resultFlg === 1 ? "失败" : "成功"}</span>
          </div>
        );
      }
    },

    {
      prop: "resultMsg",
      label: "失败原因",
      minWidth: 240
    },
    {
      prop: "userName",
      label: "操作人",
      minWidth: 180
    },
    {
      prop: "createTime",
      label: "操作时间",
      minWidth: 180
    }
  ] as ColumnProps<DeviceOps.ResDeviceLabList>[];
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
